<template>
    <div class="out">
      <el-tooltip placement="bottom" effect="light">
        <template #content>
            <p style="font-weight:500;font-size:0.9rem">姓名:{{username}}</p>
            <p style="font-weight:500;font-size:0.9rem">所属机构:{{affi}}</p>
            <p style="font-weight:500;font-size:0.9rem">引用次数:{{cite}}</p>
        </template>
        <el-avatar :size="60" :src="imageUrl" :class="{'showPointer':tag}" @click="toMyPage"></el-avatar>
      </el-tooltip>
      <div class="name">{{username}}</div>
    </div>
</template>
<script>
import { data } from 'dom7'
import axios from 'axios'
export default {
  name: 'AuthorCard',
  props: {
    userId:Number,
    username:String,
    imageUrl:String,
    userIdIn:Number,
    cite:String,
    affi:String,
  },
  data:function(){
    return {
      tag:false,
    }
  },
  mounted:function(){
    if(this.userId!="null")
    this.tag=true;
  },
  methods:{
    toMyPage:function(){//去往个人页面
    console.log(this.userId);
        if(this.userId!="null"){
           let newp = this.$router.resolve({path: '/MyPage', query: {userId:this.userId,userIdIn:this.userIdIn}});
            window.open(newp.href,'_blank')
            //this.$router.push({path:'/MyPage',query:{userId:this.userId,userIdIn:this.userIdIn}});
        }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.out{
    width: 20vw;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.profilePhoto{
  width:4rem;
  height:3rem;
  border-radius: 3rem;
  background-size:cover;
  border: solid #9e9e9e
}
.name{
  width: 12rem;
  height: 3rem;
  line-height: 3rem;
}
.showPointer{
  cursor: pointer;
}
</style>